<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>地图管理系统</title>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #container {
            height: 91.5%;
            width: 100%;
            float: left;
            position: fixed;
        }
    </style>
    <link rel="icon" href="image/favicon.ico">
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="js/ol/ol.css">
    <script src="js/ol/ol.js"></script>


    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/index.css" media="screen">
    <link rel="stylesheet" href="js/dist/bootstrap-table.css">


    <!--    bootstrap-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/dist/bootstrap-table.js"></script>
    <script src="js/dist/locale/bootstrap-table-zh-CN.js"></script>
    <script src="js/dist/xlsx.full.min.js"></script>

    <script src="js/DataDeal.js"></script>
    <script src="js/cal/GPSTransformation.js"></script>
    <script src="js/Graticule.js"></script>
    <script src="js/cal/SheetCal.js"></script>
    <script src="js/cal/ConstData.js"></script>
    <script src="js/Dispaly.js"></script>
    <script src="js/searchInfo.js"></script>
    <script src="js/TableOperator.js"></script>
    <script src="js/toast.js"></script>

</head>
<body>

<!--<div class="image"  id="image" > <img src="image/logo.png" height="50px"> </div>-->


<div id=head class="navbar-header">
    <a class="navbar-brand" href="#"><img alt="Brand" src="image/logo.png" height="50" style="margin-top: -15px"></a>
    <a class="navbar-brand" href="#">地图管理系统</a>
</div>
<ul id="myTabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#Toview" aria-controls="profile" data-toggle="tab" style="padding-top: 18px">图幅查看</a>
    </li>
    <li role="presentation">
        <a href="#MapReceive" aria-controls="profile" data-toggle="tab" style="padding-top: 18px">地图入库</a>
    </li>
    <li role="presentation">
        <a href="#MapProvide" aria-controls="profile" data-toggle="tab" style="padding-top: 18px">地图发放</a>
    </li>
    <li role="presentation">
        <a href="#MapTransfers" aria-controls="profile" data-toggle="tab" style="padding-top: 18px">地图调拨</a>
    </li>
</ul>
</div>


<!-- 底图容器-->
<div id="container"></div>
<!--状态栏-->
<div id="statusBar"></div>
<!--选择情况栏-->
<div id="selectBar"></div>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="Toview">
        <div>
        <span class="btn-group" role="group" aria-label="..."
              style="margin: 30px 30px;float: left;left:60px;background-color:white;z-index:10">
            <button type="button" id="type" class="btn-default dropdown-toggle btn-xs"
                    data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">类型<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="sheetgrid">
                    <li><a href="#" onclick="selectByType(this)">无</a></li>
                <li role="separator" class="divider"></li>
                    <li><a href="#" onclick="selectByType(this)">纸图</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectByType(this)">dlg</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectByType(this)">dem</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectByType(this)">dom</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectByType(this)">png/jpg</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectByType(this)">ai</a></li>
                <li role="separator" class="divider"></li>
            </ul>
        </span>
        </div>
        <div>
        <span class="btn-group" role="group" aria-label="..."
              style="margin: 30px 30px;float: left;left:10px;background-color:white;z-index:10">

            <button type="button" id="sheetgrid" class="btn-default dropdown-toggle btn-xs"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">接图表<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="type">
                    <li><a href="#" onclick="selectOnchange(this)">无</a></li>
                <li role="separator" class="divider"></li>
                    <li><a href="#" onclick="selectOnchange(this)">100万</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectOnchange(this)">50万</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectOnchange(this)">25万</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectOnchange(this)">10万</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectOnchange(this)">5万</a></li>
                <li role="separator" class="divider"></li>
                   <li><a href="#" onclick="selectOnchange(this)">1万</a></li>
                <li role="separator" class="divider"></li>
            </ul>
        </span>

        </div>

    </div>


    <div role="tabpanel" class="tab-pane" id="MapReceive">
        <div class="btn-group" role="group" aria-label="..."
             style="margin: 30px 30px;float: left;left:60px;background-color:white;z-index:10">
            <button type="button" id="recieve" class="btn btn-default" data-toggle="modal" data-target="#ReceivePlan">入库
            </button>
            <button type="button" onclick="back()" class="btn btn-default">添加图幅</button>
<!--            <button type="button" id="next" class="btn btn-default">下一条</button>-->
<!--            <button type="button" id="clear" class="btn btn-default">清除</button>-->
<!--            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#editPlan">添加图幅-->
            </button>
        </div>
        <div id="ReceivePlan" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document" style="width: 90%;height: 60%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">接收清单</h4>
                    </div>
                    <div id="toolbar" class="btn-group">
                        <button id="btn_add" type="button" class="btn btn-success">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                        </button>
                        <button id="btn_edit" type="button" class="btn btn-primary">
                            <span class="glyphicon glyphicon-file" aria-hidden="true"></span>导入
                        </button>
                        <button id="btn_grid" type="button" class="btn btn-success">
                            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>接图表
                        </button>
                        <button id="btn_clear" type="button" class="btn btn-primary">
                            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>清空
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                        <input id="btn_import" type="file" style="display: none">
                    </div>
                    <!--                    <table id="table" ></table>-->
                    <table id="table" data-locale="zh-CN" data-search="true" data-search-on-enter-key="true"></table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="btn_submit" class="btn btn-primary">提交</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    <div class="col-sm-5" id="so"
         style="margin: 10px 10px;float: right;right:0px;z-index:10;width:30%;height: 10%">
        <!-- 搜索框 -->
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" id="searchTXT">
            </div>
            <button type="button" class="btn btn-default" onclick="searchSheet()">搜索</button>
        </form>
    </div>
</div>
<!--右键菜单-->
<div id="contextmenu_container" class="contextmenu">
    <ul>
        <li><button type="button" onclick="setParams()">批量设置</button></li>
        <li><button type="button" onclick="endSelect()">结束选择</button></li>
        <!--        <li><a href="#" onclick="addSheet2Table()" >添加图幅</a></li>-->
    </ul>
</div>
<!--地图入库-->
<div id="editPlan" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label1">
    <div class="modal-dialog" role="document" style="width: 40%;height: 50%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="Label1">批量设置</h4>
            </div>
            <form class="form-horizontal" role="form" id="formid">
                <div class="form-group">
                    <label for="inputScale" class="col-sm-2 control-label">比例尺</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="inputScale" placeholder="请输入比例尺">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputScale" class="col-sm-2 control-label">数量</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="inputNum" placeholder="请输入数量">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputScale" class="col-sm-2 control-label">类型</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="inputType" placeholder="请输入类型">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputScale" class="col-sm-2 control-label">位置</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="inputLocation" placeholder="请输入位置">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputScale" class="col-sm-2 control-label">年代</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="inputYear" placeholder="请输入年代">
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="btn_ok()" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

<script type="text/javascript">
    //初始化底图
    var map = new ol.Map({
        view: new ol.View({
            center: ol.proj.transform([104, 40], "EPSG:4326", "EPSG:3857"),
            zoom: 4,
            minZoom: 4,
            maxZoom: 11,
        }),
        projection: "EPSG:3857",
        layers: [
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
                })
            })
        ],
        target: "container",
    })
    //移除双击放大事件
    const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
            return interaction instanceof ol.interaction.DoubleClickZoom;
        });
    map.removeInteraction(dblClickInteraction);

    //鼠标移动事件
    map.on("pointermove", function (e) {
        var coor = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326");
        coor = [coor[0].toFixed(6), coor[1].toFixed(6)];
        var sheet = LngLat2Sheet(coor, select_scale);
        document.getElementById("statusBar").innerText = "--经纬度:" + coor + "," + "图幅号:" + sheet + ",比例尺:" + select_scale + "万";
    })
    //鼠标双击事件
    var db_click = map.on("dblclick", function (e) {
        var coor = ol.proj.transform(e.coordinate, "EPSG:3857", "EPSG:4326");
        coor = [coor[0].toFixed(6), coor[1].toFixed(6)];
        var sheet = LngLat2Sheet(coor, select_scale);
        searchBySheet(sheet);
    })


    //选择比例尺
    function selectOnchange(obj) {
        var txt = obj.innerHTML;
        map.removeLayer(LineLayer);
        map.removeLayer(RectangularLayer);
        rectangleSource = new ol.source.Vector();
        //移除选择的格网
        selectedSheet = [];
        map.removeLayer(SelectSheetLayer);

        switch (txt) {
            case "无":
                document.getElementById("sheetgrid").innerText = "接图表";
                select_scale = 100;
                break;
            case "100万":
                document.getElementById("sheetgrid").innerText = "100万";
                select_scale = 100;
                addByZoom(100);
                display_save(100, select_type);
                break;
            case "50万":
                document.getElementById("sheetgrid").innerText = "50万";
                select_scale = 50;
                addByZoom(50);
                display_save(50, select_type);
                break;
            case "25万":
                document.getElementById("sheetgrid").innerText = "25万";
                select_scale = 25;
                addByZoom(25)
                display_save(25, select_type);
                break;
            case "10万":
                document.getElementById("sheetgrid").innerText = "10万";
                select_scale = 10;
                addByZoom(10)
                display_save(10, select_type);
                break;
            case "5万":
                document.getElementById("sheetgrid").innerText = "5万";
                select_scale = 5;
                addByZoom(5)
                display_save(5, select_type);
                break;
            case "1万":
                document.getElementById("sheetgrid").innerText = "1万";
                select_scale = 1;
                addByZoom(5)
                display_save(1, select_type);
                break;
        }
    }

    //选择类型
    function selectByType(obj) {
        var txt = obj.innerHTML;
        map.removeLayer(LineLayer);
        map.removeLayer(RectangularLayer);
        rectangleSource = new ol.source.Vector();
        switch (txt) {
            case "无":
                document.getElementById("type").innerText = "无";
                select_type = 0;
                break;
            case "纸图":
                document.getElementById("type").innerText = "纸图";
                select_type = 1;
                break;
            case "dlg":
                document.getElementById("type").innerText = "dlg";
                select_type = 2;
                break;
            case "dem":
                document.getElementById("type").innerText = "dem";
                select_type = 3;
                break;
            case "dom":
                document.getElementById("type").innerText = "dom";
                select_type = 4;
                break;
            case "png/jpg":
                document.getElementById("type").innerText = "png/jpg";
                select_type = 5;
                break;
            case "ai":
                document.getElementById("type").innerText = "ai";
                select_type = 6;
                break;
        }
        document.getElementById("sheetgrid").innerText = "接图表";
    }

    //根据图幅号搜索并定位
    function searchSheet() {
        map.removeLayer(SearchSheetLayer);
        var sheet = document.getElementById("searchTXT").value;
        rectangleSource = new ol.source.Vector();

        var sheet_scale = Sheet2scale(sheet);
        addRectangular(sheet, getLnglat_step(sheet_scale), "rgb(187,187,187,0.7)", sheet_scale, SearchSheetLayer);
        SearchSheetLayer.setZIndex(11);
        SearchSheetLayer.setSource(rectangleSource);
        map.addLayer(SearchSheetLayer);

        select_scale = sheet_scale;
        var center = Sheet2Num(sheet, sheet_scale);
        map.getView().setCenter(center[0]);
        map.getView().setZoom(getZoom(sheet_scale));
    }

    //绑定右键菜单
    var menu_overlay = new ol.Overlay({
        element: document.getElementById("contextmenu_container"),
        positioning: 'center-center'
    });
    menu_overlay.setMap(map);

</script>
</body>
</html>